<template>
  <div class="nof">
    <div class="img">
      <img
        src="https://qnm.hunliji.com/Fl5tuAirgEJysDmFTbJ6k8EPYj8L"
        alt="404"
      />
    </div>
    <div class="text">
      <h4>页面丢失了</h4>
      <p>
        将在 <span class="second">{{ n }}S</span>后返回首页
        <router-link to="/">立即返回</router-link>
      </p>
    </div>
    <div class="other">
      <p>您还可以看看：</p>
      <div class="nav">
        <router-link to="">电子请帖</router-link>
        <router-link to="">婚礼MV</router-link>
        <router-link to="">结婚百科</router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      n: 5,
      time: 0,
    };
  },
  mounted() {
    this.time = setInterval(() => {
      if (this.n > 0) {
        this.n--;
        if (this.n == 0) {
          this.n = 5;
          this.$router.push("/")
          clearInterval(this.time);
        }
      }
    }, 1000);
  },
};
</script>
<style scoped>
h4 {
  margin-bottom: 8px;
  color: #000;
  font-size: 18px;
  font-weight: 700;
}
p,
a,
span {
  font-size: 14px;
}
.nof {
  padding-top: 80px;
  display: flex;
  justify-content: center;
  flex-flow: column;
}
.nof > .img {
  margin: 0 auto;
  width: 100px;
  height: 100px;
}
.nof > .img img {
  width: 100%;
  height: 100%;
}
.nof .text {
  display: flex;
  flex-flow: column;
  justify-content: center;
  text-align: center;
  padding-top: 14px;
}
.nof .text .second {
  color: #f83244;
  padding: 0 4px;
}
.nof .text a {
  color: #578afe;
  margin-left: 12px;
}
.nof .other {
  display: flex;
  flex-flow: column;
  padding-left: 25%;
  margin-top: 40px;
  text-align: left;
}
.nof .other  p {
  color: #666 ;
  padding-bottom: 15px;
}
.nof .other .nav a {
  font-size: 14px;
  color: #333;
  font-weight: 700;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 12px;
  background: #f6f6f6;
  border-radius: 16px;
}
</style>